<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>答题</title>
    <link rel="stylesheet" href="./libs/layui-v2.6.8/css/layui.css">
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./congfig.js"></script>
    <script src="./libs/jquery.min.js"></script>
    <script src="./libs/layui-v2.6.8/layui.js"></script>
  </head>
  <body>
    <div class="mask">
      <div class="triangle"></div>
      <div class="settingBox">
        <div class="fontSet">
          <img src="./imgs/字体-m.png" alt="">
          <span>字体大小</span>
        </div>
        <div class="line"></div>
        <div class="help">
          <img src="./imgs/help-m.png" alt="">
          <span>帮助文档</span>
        </div>
      </div>
    </div>
    <div class="mask-full">
      <div class="helpBox">
        <div class="cancel">
          <img src="./imgs/关闭-m.png" alt="" >
        </div>
        <div class="title">
          帮助文档
        </div>
        <div class="content">
          1、电脑端答题请使用谷歌浏览器， 手机端答题可使用微信或QQ打开链接进行作答，或使用第三方浏览器;<br/>
          2、请注意检查个人信息、考试科目、考试时间等信息是否正确；<br/>
          3、可点击左侧答题卡题号选择试题进行作答，也可点击“上一题”或“下一题”按钮进行切换;<br/>
          4、未作答的题目，题号显示为白色;已作答的题目，题号显示为绿色;已标记的题目，题号显示为黄色；当前选中的题目，题号边框为绿色;<br/>
          5、答题完成后，需要点击 <span style="color:#42ba7a ;">“交卷”</span> 按钮进行交卷，否则此次考试无效;<br/>
          6.、在规定时间内没有交卷系统将自动交卷。<br/>
        </div>
      </div>
      <div class="fontSetBox">
        <div class="cancel">
          <img src="./imgs/关闭-m.png" alt="" >
        </div>
        <div class="title">
          字体大小
        </div>
        <div class="sizeBtnBox">
          <div class="sizeBtn" data-font="small">较小</div>
          <div class="sizeBtn sizeBtn-current" data-font="normal">标准</div>
          <div class="sizeBtn" data-font="larger">较大</div>
        </div>
        <div class="confirmBox">
          <div class="confirmBtn">确认修改</div>
        </div>
      </div>
    </div>
    <!-- 头 -->
    <div class="header">
      <div class="header-center">
        <img src="./imgs/倒计时time-circle.png" alt="" />
        <span id="timer"></span>
      </div>
      <div class="header-right">
        <i class="layui-icon layui-icon-more" style="font-size: 5vw;"></i> 
      </div>
    </div>
    <div class="header-sheet">
      <div class="header-sheet-left">
        <i class="layui-icon layui-icon-left" style="font-size: 5vw;"></i>
      </div>
      <div class="header-sheet-center">
       答题卡
      </div>
    </div>
    <!-- 答题卡 -->
    <div class="sheet">
      <!-- 图例 -->
      <div class="sheet-legend">
        <div class="sheet-legend-item">
          <div class="answered"></div>
          <span>已作答</span>
        </div>
        <div class="sheet-legend-item">
          <img src="./imgs/标记题上.png" class="signed"></img>
          <span>已标记</span>
        </div>
        <div class="sheet-legend-item">
          <div class="checked"></div>
          <span>已选中</span>
        </div>
        <div class="sheet-legend-item">
          <div class="unchecked"></div>
          <span>未作答</span>
        </div>
      </div>
      <!-- 选项列表 -->
      <div class="sheet-body">
        <div id="view"></div>
      </div>
    </div>
    <!-- 答题区域 -->
    <div class="centre">
      <!-- 答题区域 -->
      <div>
        <iframe
          width="100%"
          scrolling="auto"
          frameborder="0"
          id="subjectIframe"
        ></iframe>
      </div>
      <div class="bottomBtn">
        <div class="lastBtn">上一题</div>
        <div class="nextBtn">下一题</div>
        <div class="signBtn">
          <img src="./imgs/标记题上@2x.png" alt="">
          <span>标记本题</span>
        </div>
        <div class="signedBtn">
          <img src="./imgs/标记题上.png" alt="">
          <span>已标记</span>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer-finishBtn">
        <img src="./imgs/对号1手机@2x.png" alt="">
        <span>交卷</span>
      </div>
      <div class="footer-right">
        <div>
          <div class="rectangle-text"></div>
          <div class="rectangle-text-title">答题进度</div>
        </div>
        <div class="answerCard">
          <img src="./imgs/datika@2x.png" alt="">
          <div>答题卡</div>
        </div>
      </div>
    </div>
  </body>
  <script id="sheetBody" type="text/html">
    {{# layui.each(d, function(index1, subject){ }}
    <div class="sheet-content" id="select">
      <div class="sheet-content-title">
        <span class="sheet-content-title-content">{{ subject.jgmc}}</span>
      </div>
      <div class="sheet-content-body">
        {{# layui.each(subject.tmlb, function(index, item){ }}
        <span class="sheet-content-body-index" data-index="{{index}}" data-sign="{{item.bjzt}}" data-answering="{{item.yhda}}" data-type="{{item.stlx}}" data-id="{{item.yhstid}}" data-title="{{subject.jgmc}}">{{index + 1}}</span>
        {{# }); }}
      </div>
    </div>
    {{# }); }}
  </script>
  <script src="./js/home.js" type="text/javascript"></script>
</html>
